<script setup>
import "@/css/description.css"
import {ref} from "vue";
// import {useItIdStore} from "@/js/util/itId";
import { ArrowRight } from '@element-plus/icons-vue'
import {ByBookIdService} from '@/js/api/index'
import {useTokenStore} from "@/js/util/token";
import request from "@/js/util/request";
//图片及放大预览时所用

//初始化时需要一个bookid,获取并存储bookId
const bookId = ref("")
bookId.value = useTokenStore().bookId
//购买数量及收货地址
const num = ref(0)
const address = ref([])
//控制图片放大
const isImgShow = ref(false)
//书籍数据
const book = ref(
  {
    "bookId": 1,
    "type": "世界名著",
    "bookName": "红与黑",
    "author":"",
    "price":1,
    "truePrice":1,
    "publisher":"",
    "publishTime":"",
    "quantity":1,
    "description":"",
    "pictureBig":"",
    "pictureSmall":""
  }
)
//根据bookId查找书籍
const selectByBookId = async () => {
  let result = await ByBookIdService(bookId.value)
  book.value = result.data.data

}
//查找默认地址
const findDefaultAddress = () => {
  request.get("/findDefaultAddress").then(function (result){
    address.value = result.data.data.address
  })
}
selectByBookId()
findDefaultAddress()
</script>

<template>
<el-container style="height: 100%">
  <el-header style="display: flex">
    <el-breadcrumb :separator-icon="ArrowRight" style="display: flex;align-content: center;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书详情</el-breadcrumb-item>
      <el-breadcrumb-item>{{ book.bookName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-header>
  <el-main style="display: flex;">
    <table style="width: 90%; height: 100%;margin: auto">
      <tr>
        <td style="width: 25%">
          <table style="width: 100%;height: 100%">
            <tr style="height: 60%">
              <img
                  style="height: 100%;width: 100%"
                  referrerpolicy="no-referrer"
                  :src="book.pictureBig"
                  @click="isImgShow = true"
              />
            </tr>
            <tr></tr>
          </table>
        </td>
        <td style="width: 60%">
          <table style="width: 100%; height: 100%;">
            <tr>
              <table style="width: 100%; height: 100%;">
                <tr>
                  <table>
                    <tr><span style="font-size: 18px;font-weight: bold">
                    {{ book.bookName }}</span></tr>
                    <tr>
                      <div style="height: 5px;width: 100%;font-family: 微软雅黑"></div>
                      <span>{{ book.description }}</span>
                    </tr>
                    <tr>
                      <div style="height: 5px;width: 100%"></div>
                      <span style="font-size: 12px;margin-right: 10px">作者：{{ book.author }}</span>
                      <span style="font-size: 12px;margin-right: 10px">出版社：{{ book.publisher }}</span>
                      <span style="font-size: 12px;margin-right: 10px">出版时间：{{ book.publishTime }}</span>
                      <div style="height: 15px;width: 100%"></div>
                    </tr>
                    <tr style="background-color: #FAFCF7">
                      <div><span style="font-size: 12px;color: #8f8f8f">抢购价</span></div>
                      <div style="color: red">￥<span style="font-weight: bold;font-size: 22px">{{ book.truePrice }}</span>
                      </div>
                      <div style="height: 15px"></div>
                      <div style="font-size: 12px;color: #8f8f8f">定价<span><del>￥{{ book.price }}</del></span></div>
                      <div style="height: 10px"></div>
                      <div id="discount">
                        <span style="color: white;font-size: 12px;display: flex;justify-content: center; align-items: center;padding-left: 10px">
                          优惠通知
                        </span>
                      </div>
                    </tr>
                    <tr>
                      <div style="height: 10px"></div>
                      <div style="display: flex;align-content: center;font-size: 12px;color: #8f8f8f;">
                        <span style="display: flex;justify-content: center; align-items: center;margin-right: 10px">配送至</span>
                        <el-input
                            v-model="address"
                            placeholder="收货地址"
                            style="margin-right: 10px;width: 50%"
                        >

                        </el-input>
                        <span style="display: flex;justify-content: center; align-items: center;">剩余</span>
                        <span style="display: flex;justify-content: center; align-items: center;color: red;font-weight: bold">{{ book.quantity }}</span>
                        <span style="display: flex;justify-content: center; align-items: center;">件</span>
                      </div>
                      <div style="height: 10px"></div>
                      <div style="display: flex;align-content: center">
                        <span style="font-size: 12px;color: #8f8f8f;display: flex;justify-content: center; align-items: center;margin-right: 10px">服 &nbsp;务</span>
                        <span style="font-size: 12px;color: #8f8f8f;">由<strong>“回书”</strong>发货并提供售后</span>
                      </div>
                    </tr>
                  </table>
                </tr>
              </table>
            </tr>
            <tr height="40%">
              <div>
                <el-input-number
                    v-model="num" :min="1" :max="10" style="margin-right: 10px" />
                <el-button style="border-radius: 0;background-color: red;color: white;">加入购物车</el-button>
                <el-button style="border-radius: 0;background-color: #FAFCF7;color: red;border-color: red;">
                  立即购买
                </el-button>
              </div>
              <div><span style="font-size: 12px;color: #8f8f8f">每位用户最多购买<span style="color: red">10</span>件</span></div>
            </tr>
          </table>
        </td>
        <td style="width: 15%">
          <table style="width: 100%; height: 100%">
            <tr style="height: 30%;width: 100%">
              <div style="color: red;display: flex">
                <span style="height: 25px;width: 25px;background-color: red;
                display: block;border-radius: 50%;color: white;text-align: center"><strong>回</strong></span>
                <span style="margin-left: 5px">回书直营</span></div>
              <div style="width: 100%;height: 0;border-top: 1px solid var(--el-border-color);margin-top: 10px"/>
              <div>
                <table style="color: #855758;font-size: 12px">
                  <div style="height: 5px"></div>
                  <tr>
                    <td>正品保障</td>
                    <td>服务支持</td>
                  </tr>
                  <div style="height: 5px"></div>
                  <tr>
                    <td>差价返还</td>
                    <td>15天换货</td>
                  </tr>
                  <div style="height: 5px"></div>
                  <tr>礼品包装</tr>
                  <div style="height: 5px"></div>
                  <tr>支持7天无理由退货</tr>
                  <div style="height: 5px"></div>
                </table>
              </div>
            </tr>
            <tr></tr>
          </table>
        </td>
      </tr>
    </table>

    <!-- 图片放大的弹窗 -->
    <div id="myModal" class="modal" v-if="isImgShow">
      <!-- 关闭按钮 -->
      <el-button class="close" circle @click="isImgShow = false"><el-icon><Close /></el-icon></el-button>
      <!-- 弹窗内容 -->
      <img class="modal-content" id="img01" :src="book.pictureBig">
    </div>
  </el-main>
  <el-footer>

  </el-footer>
</el-container>

</template>



